<template>
		<view class="navbar">
			<!-- dingwei -->
			<view class="dingwei">
				<view class="localtion" @click="getLocaltion">
					<view class="icon">
						<text class="iconfont icon-location"></text>
					</view>
					<view class="address">
						{{ realarea }}
					</view>
					<view class="mark">
						>
					</view>
				</view>
				<view class="msg">
					<text class="iconfont icon-xiaoxi1"></text>
				</view>
			</view>
			<!-- search -->
			<view class="search_bar">
				<view class="search_box" @click="onSearchFocus">
					<text class="iconfont icon-search"></text>
					<text>搜索项目</text>
				</view>
			</view>
		</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	export default {
	    components: {uniSearchBar},
		data() {
			return {
				value: "",
				realcity: "",
				realarea: "",
				width: "",
				height: "",
			}
		},
		computed: {
			cityName() {
				return this.$store.state.cityInfo.city
			},
			district() {
				return this.$store.state.cityInfo.district
			}
		},
		mounted() {
			this.getLocaltion()
		},
		methods: {
			// search focus
			onSearchFocus() {
				console.log(1);
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
			search( value ) {
				//console.log(value, this.value) 
			},
			// 定时获取位置
			interval() {
				setInterval(() => {
					this.getCity()
				}, 1000 * 10)
			},
			// 获取位置
			getLocaltion() {
				//console.log(1);
				let self = this
				uni.getLocation({
				    // type: 'wgs84',
					type:"gcj02",
					geocode: true,
				    success: function (res) {
				       // console.log(res);
						self.width = res.latitude
						self.height = res.longitude
						// self.getCity()
						uni.request({
							url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${self.width},${self.height}&key=${self.$apikey}`,
							data: {},
							success:( city ) => {
								 // console.log(city);
								self.realcity = city.data.result.ad_info.city
								self.realarea = city.data.result.address_reference.landmark_l2.title
								self.$store.commit("getCityInfo", city.data.result.ad_info)
								self.$store.dispatch("emitCityInfo",city.data.result.ad_info)
								//console.log(self.realcity, self.realarea);
							}
						})
				    }
				});
			},
			// 获取城市
			getCity() {
				let self = this
				if(this.width && this.height) {
					uni.request({
						url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${self.width},${self.height}&key=${self.$apikey}`,
						data: {},
						success:( city ) => {
							// console.log(city);
							self.realcity = city.data.result.ad_info.city
							self.realarea = city.data.result.ad_info.district
							self.$store.commit("getCityInfo", city.data.result.ad_info)
							self.$store.dispatch("emitCityInfo",city.data.result.ad_info)
							// console.log(this.$store.state.cityInfo);
						}
					})
				}
			},
		},
		updated() {
			// this.getCity()
		},
	}
</script>

<style lang="scss" scoped>
	.navbar {
		width: 100%;
		// height: 120rpx;
		background-color: rgb(51,205,199);
		box-sizing: border-box;
		
		.dingwei {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			color: #fff;
			.localtion {
				display: flex;
				align-items: center;
				
				font-weight: bold;
				.address {
					margin-left: 10rpx;
					max-width: 550rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 35rpx;
				}
				.mark {
					margin-left: 10rpx;
				}
			}
		}
		.search_bar {
			width: 100%;
			box-sizing: border-box;
			// height: 120rpx;
			border-radius: 30rpx 30rpx 0 0;
			background-color: rgb(241,238,248);
			padding: 20rpx;
			.search_box {
				width: 80%;
				height: 60rpx;
				margin: 0 auto;
				background-color: #fff;
				border-radius: 30rpx;
				text-align: center;
				color: #aaa;
				font-size: 24rpx;
				line-height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
